<template>
  <div class="bg">
    <div class="title" v-if="showTitle"><span class="rpTitle">新客红包暴涨</span><span class="rpMsg">红包最高爆至{{ redPaper }}元</span></div>
    <div class="container">
        <div class="item" v-for="item in items" :key="item.id"><Market :item="item" @plus="add"/></div>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, reactive, set} from 'vue';
import { useRoute } from 'vue-router';
import Market from './Market.vue';


export default {
    name:'MarketList',
    components:{Market},
    setup(){
        const route = useRoute()
        //指明来向
        let from = route.query.from
        let showTitle = computed(()=>{
            if(from){
                return false
            }
            return true
        })
        let redPaper = 'xx'
        //超市的所有信息
        let items = reactive(
            [
                {id:'001',num:0,name:'香江百货',logo:'market.jpg',start_price:20,month_sales:999,welfare:6,score:4.8,delivery_time:40,phone_number:123456789,timeOnSale:{start:6,end:24}},
                {id:'002',num:0,name:'沃尔玛',logo:'logo2.jpg',start_price:20,month_sales:999,welfare:6,score:4.8,delivery_time:40,phone_number:123456789,timeOnSale:{start:6,end:24}},
                {id:'003',num:0,name:'中百仓储',logo:'logo3.jpg',start_price:20,month_sales:999,welfare:6,score:4.8,delivery_time:40,phone_number:123456789,timeOnSale:{start:6,end:24}},
                {id:'004',num:0,name:'美宜佳',logo:'logo4.jpg',start_price:20,month_sales:999,welfare:6,score:4.8,delivery_time:40,phone_number:123456789,timeOnSale:{start:6,end:24}},
                {id:'005',num:0,name:'步步高',logo:'logo5.jpg',start_price:20,month_sales:999,welfare:6,score:4.8,delivery_time:40,phone_number:123456789,timeOnSale:{start:6,end:24}},
                {id:'006',num:0,name:'百尚超市',logo:'logo6.jpg',start_price:20,month_sales:999,welfare:6,score:4.8,delivery_time:40,phone_number:123456789,timeOnSale:{start:6,end:24}}
            ]
        )
        function add(value){
            let index = items.findIndex(t=>t.id==value)
            items[index].num++
        }
        return {
            redPaper,items,add,showTitle
        }
    }
}
</script>

<style scoped>
    .bg {
        width: 73vw;
        margin-top: 20px;
        margin-right: auto;
        margin-left: auto;
        background-color: #e49898;
        border-radius: 10px;
        min-width: 600px;
    }
    .title {
        margin-bottom: 10px;
    }
    .container {
        width: 100%;
        padding-right: 3px;
        display: flex;
        flex-wrap: wrap;
        padding-top: 20px;
        /* gap: 10px; */
    }
    .item {
        flex: 1 1 50%;
        max-width: 47%;
        margin-bottom: 10px;
    }
    .item:nth-child(odd){
        margin-right: 10px;
    }
    .rpTitle {
        font-size: 25px;
        color: #c90c0c;
    }
    .rpMsg {
        font-size: 15px;
        color: rgb(105, 103, 103);
        margin-left: 20px;
        margin-top: 10px;
    }
</style>